<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单制作作业</title>
    <script src="../js/ChuanKou.js"></script>
    <script>
      //关于表单验证 两种提交表单的方法 一个自动提交 一个非自动提交
      // 定义一个验证方法
      var mysub = function () {
          //自动提交按钮 定义一个名字

          //聚焦在名字文本框
          $('name').focus();
          //给按钮做点击事件
              //名字验证
              if($('name').value.length < 1){
                  alert('请输入您的姓名！');
                  return false;
              }
              //密码验证
              if ($('pass').value.length < 1){
                  alert('密码不能为空！');
                  $('pass').focus();
                  return false;
              }
              //密码不能少于6位的验证
              if ($('pass').value.length < 6){
                  alert('密码不能少于6位');
                  $('pass').focus();
                  return false;
              }
              //关于会员的验证
              var radio_no = false;//没有一个选中
              //抓取元素
              var list = document.getElementsByName('lei');
              //遍历数组
              for (var i = 0; i < list.length; i++) {

                  if (list[i].checked) {
                      radio_no = true;
                  }
              }
              if (!radio_no){
                  alert('请选择会员类型！');
                  return false;
              }
              var num = 0;
              //抓取元素
              var _list = document.getElementsByName('lovely');
              //遍历数组
              for (var i = 0; i < _list.length; i++) {

                  if (_list[i].checked) {
                      num++;
                  }
              }
              if (num < 2){
                  alert('至少选择两个选项！');
                  return false;
              }
              return true;
      };

      window.onload = function () {
          $('submit2').onclick = function () {
              var result = mysub();
              if(result){
                  $('myform').submit();
              }
          };

      };
    </script>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>
<body>
<form id="myform" action="../html/submit.html" method="post" onsubmit="return mysub();">
<input type="hidden" name="hid" value="学生">
<table width="50%">
    <tr>
        <th colspan="2"><h3>会员注册</h3></th>

    </tr>
    <tr>
        <td style="text-align:right" width="50%">姓名：</td>
        <td style="text-align:left"><input  id="name" type="text" /> <span style="color: red">*</span></td>
    </tr>
    <tr>
        <td style="text-align:right" width="50%">头像：</td>
        <td style="text-align:left"><input type="file"/></td>
    </tr>
    <tr>
        <td style="text-align:right" width="50%">性别：</td>
        <td style="text-align:left">
            <select>
                <option>男</option>
                <option>女</option>
            </select></td>
    </tr>
    <tr>
        <td style="text-align:right" width="50%">年龄：</td>
        <td style="text-align:left"><input id="age" type="text"/></td>
    </tr>
    <tr>
        <td style="text-align:right" width="50%">密码：</td>
        <td style="text-align:left"><input id="pass" type="password"/> <span style="color: red">*</span></td>
    </tr>
    <tr>
        <td style="text-align:right" width="50%">会员类型：</td>
        <td style="text-align:left">

            <label><input name="lei" type="radio">包月会员</label>
            <label><input name="lei" type="radio">年费会员</label >
            <label><input name="lei" type="radio">永久会员</label>
            </td>
    </tr>
    <tr>
        <td style="text-align:right" width="50%">爱好：</td>
        <td style="text-align:left">

            <label><input name="lovely" type="checkbox"/>音乐</label>
            <label><input name="lovely" type="checkbox"/>爬山</label>
            <label><input name="lovely" type="checkbox"/>看书</label>
            <span style="color: #a0a0a0">（必须选两项）</span>
        </td>
    </tr>
    <tr>
        <td style="text-align:right" width="50%">个人介绍：</td>
        <td rowspan="2" style="text-align:left"><textarea cols="20" rows="5"></textarea></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td style="text-align:right" width="50%"><input id="submit1" type="submit" value="注册"/></td>
        <td style="text-align:left"><button type="button" id="submit2">注册</button> <input type="reset"/></td>
    </tr>

</table>
</form>

</body>
</html>